<template>
    <el-drawer title="详情" :visible.sync="visible" :wrapperClosable="false" size="600px" append-to-body
        class="JNPF-common-drawer">
        <div class="JNPF-flex-main">
            <div class="dynamicForm dynamicDetail">
                <el-form ref="formRef" :model="dataForm" size="small" label-width="100px" label-position="top">
                    <template v-if="!loading">
                        <el-col :span="24">
                            <el-row :gutter="15">
                                <el-col :span="24">
                                    <jnpf-form-tip-item label="金融机构名称" prop="companyName">
                                        <p>{{ dataForm.companyName }}</p>
                                    </jnpf-form-tip-item>
                                </el-col>
                                <el-col :span="24">
                                    <jnpf-form-tip-item label="金融机构类型" prop="serverType">
                                        <p>{{ dataForm.serverType }}</p>
                                    </jnpf-form-tip-item>
                                </el-col>
                                <el-col :span="24">
                                    <jnpf-form-tip-item label="企业简介" prop="companyinfo">
                                        <p>{{ dataForm.companyinfo }}</p>
                                    </jnpf-form-tip-item>
                                </el-col>
                                <el-col :span="24">
                                    <jnpf-form-tip-item label="联系电话" prop="contactsPhone">
                                        <p>{{ dataForm.contactsPhone }}</p>
                                    </jnpf-form-tip-item>
                                </el-col>
                                <el-col :span="24">
                                    <jnpf-form-tip-item label="联系邮箱" prop="email">
                                        <p>{{ dataForm.email }}</p>
                                    </jnpf-form-tip-item>
                                </el-col>
                                <el-col :span="24">
                                    <jnpf-form-tip-item label-width="0">
                                        <div class="JNPF-common-title">
                                            <h2>产品信息</h2>
                                        </div>
                                        <el-table :data="dataForm.tableField106" size='mini'>
                                            <el-table-column type="index" width="50" label="序号" align="center" />
                                            <el-table-column prop="financialproducts" label="金融产品名称">
                                                <template slot-scope="scope">
                                                    <a @click="goProductDetail(scope.row.id)" style="color: #4b9bff">{{
        scope.row.financialproducts }}</a>
                                                </template>
                                                <!-- <template slot-scope="scope">
                                                    <p>{{ scope.row.financialproducts }}</p>
                                                </template> -->
                                            </el-table-column>
                                            <el-table-column prop="loancategory" label="贷款类别">
                                                <template slot-scope="scope">
                                                    <p>{{ scope.row.loancategory }}</p>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </jnpf-form-tip-item>
                                </el-col>
                            </el-row>
                        </el-col>
                    </template>
                </el-form>
            </div>
            <div class="drawer-footer">
                <el-button @click="visible = false"> 取 消</el-button>
            </div>
            <ProductDetail v-if="detailProductVisible" ref="ProductDetail" @refresh="detailProductVisible = false" />

        </div>
    </el-drawer>
</template>
<script>
import request from '@/utils/request'

import { getConfigData } from '@/api/onlineDev/visualDev'
import jnpf from '@/utils/jnpf'
import Detail from '@/views/basic/dynamicModel/list/detail'
import { thousandsFormat } from "@/components/Generator/utils/index"
import ProductDetail from './Detail_product'

export default {
    components: { ProductDetail },
    props: [],
    data() {
        return {
            visible: false,
            detailProductVisible: false,
            detailVisible: false,
            loading: false,

            dataForm: {
                id: '',
                companyName: '',
                serverType: "",
                companyinfo: '',
                contactsPhone: '',
                email: '',
                fz_financial_productsList: [],
            },
            serverTypeProps: { "label": "fullName", "value": "id" },

            producttypeProps: { "label": "fullName", "value": "id" },
            applicableareaProps: { "label": "fullName", "value": "id" },
            loancategoryProps: { "label": "fullName", "value": "id" },
        }
    },
    computed: {},
    watch: {},
    created() {

    },
    mounted() { },
    methods: {
        goProductDetail(id) {
            this.detailProductVisible = true
            this.$nextTick(() => {
                this.$refs.ProductDetail.init(id)
            })
        },

        toDetail(defaultValue, modelId) {
            if (!defaultValue) return
            getConfigData(modelId).then(res => {
                if (!res.data || !res.data.formData) return
                let formData = JSON.parse(res.data.formData)
                formData.popupType = 'general'
                this.detailVisible = true
                this.$nextTick(() => {
                    this.$refs.Detail.init(formData, modelId, defaultValue)
                })
            })
        },
        dataInfo(dataAll) {
            let _dataAll = dataAll
            this.dataForm = _dataAll
        },

        init(id) {
            this.dataForm.id = id || 0;
            this.visible = true;
            this.$nextTick(() => {
                if (this.dataForm.id) {
                    this.loading = true
                    request({
                        url: '/api/example/Fz_reg_financial_institution/detail/' + this.dataForm.id,
                        method: 'get'
                    }).then(res => {
                        this.dataInfo(res.data)
                        this.loading = false
                    })
                }

            })
        },
    },
}

</script>
